<template>
  <div class="bot">
    <h4>新品入库</h4>
    <div class="goodList">
      <div
        class="goods"
        v-for="item in goodsArr"
        @mouseenter="mouseEnter(item.id)"
        @mouseleave="mouseLeave"
      >
        <img :src="item.src" alt="" />
        <div>
          <span>￥{{ item.price }}元</span>
          <span>预计收入{{ item.earnings }}元</span>
        </div>
        <div class="shade" v-show="currentId === item.id">
          <component
            is="Handbag"
            style="width: 35px; height: 35px; color: white"
          />
          <span>上架</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

//模拟数组
const goodsArr = ref([
  {
    id: 1,
    src: "https://img.alicdn.com/imgextra/i4/3035495950/O1CN01y4jINZ1tp9NSqHBT7_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
    price: 20,
    earnings: 1.2,
  },
  {
    id: 2,
    src: "https://img.alicdn.com/imgextra/i4/31935135/O1CN01zjJo7m1nnsZpQoJLF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
    price: 20,
    earnings: 1.2,
  },
  {
    id: 3,
    src: "https://img.alicdn.com/imgextra/i3/43885677/O1CN01DvTE4W1ro7GL9R4Yr_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
    price: 20,
    earnings: 1.2,
  },
  {
    id: 4,
    src: "https://img.alicdn.com/imgextra/i3/117729638/O1CN01AVDl2L2L4G2xW7C2U_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
    price: 20,
    earnings: 1.2,
  },
  {
    id: 5,
    src: "https://img.alicdn.com/imgextra/i1/30538004/O1CN01PAXQWr28zssiYvyqB_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
    price: 20,
    earnings: 1.2,
  },
  {
    id: 6,
    src: "https://img.alicdn.com/imgextra/i2/43388146/O1CN01n0iCro2A2v7bvhupS_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
    price: 20,
    earnings: 1.2,
  },
]);

//控制遮罩层显示
const currentId = ref(0);

//鼠标移入
/**
 * mouseEnter
 * 鼠标移入 传入此项对应的id 将这项id赋值给当前id 用于判断点击的是哪一项 控制对应遮罩层显示
 * @param {number} id
 */
function mouseEnter(id) {
  currentId.value = id;
}

//鼠标移出
function mouseLeave() {
  currentId.value = 0;
}
</script>

<style lang="less" scoped>
.bot {
  height: 362px;
  margin-top: 20px;
  padding-top: 40px;
  box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
  h4 {
    font-size: 12px;
    padding-left: 10px;
    border-left: 2px solid rgb(255, 195, 6);
    margin-left: 40px;
  }
  .goodList {
    display: flex;
    margin-left: 40px;
    margin-top: 40px;
    .goods {
      width: 208px;
      height: 256px;
      cursor: pointer;
      position: relative;
      .shade {
        position: absolute;
        left: 0;
        top: -40px;
        width: 210px;
        height: 256px;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 16px;
        font-weight: 800;
      }

      img {
        width: 160px;
        height: 160px;
        margin: 0 auto;
      }
      div {
        margin-top: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
        :first-child {
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
